<template>
  <cjui-page-panel :header="t('profile.info.basicInfo')">
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formRules"
      label-position="left"
      label-width="100px"
      class="cjui-g__form is-line-style"
    >
      <el-form-item :label="`${$t('profile.user.nickname')}：`" prop="nickname">
        <el-input v-model="formModel.nickname" />
        <el-button
          v-if="formModel.nickname !== userStore.userProfile.nickname"
          type="primary"
          size="small"
          circle
          plain
          :icon="Check"
          :loading="formBtnloading.nickname"
          @click="submitFormItem('nickname')"
        />
        <el-button
          v-if="formModel.nickname !== userStore.userProfile.nickname"
          size="small"
          plain
          circle
          :icon="Close"
          @click="cancelFormItem('nickname')"
        />
      </el-form-item>
      <el-form-item :label="`${$t('profile.user.sex')}：`" prop="sex">
        <el-radio-group v-model="formModel.sex">
          <el-radio :value="1">{{ $t('profile.user.man') }}</el-radio>
          <el-radio :value="2">{{ $t('profile.user.woman') }}</el-radio>
        </el-radio-group>
        <el-button
          v-if="formModel.sex !== userStore.userProfile.sex"
          type="primary"
          size="small"
          plain
          circle
          :icon="Check"
          :loading="formBtnloading.sex"
          @click="submitFormItem('sex')"
        />
        <el-button
          v-if="formModel.sex !== userStore.userProfile.sex"
          size="small"
          plain
          circle
          :icon="Close"
          @click="cancelFormItem('sex')"
        />
      </el-form-item>
      <el-form-item :label="`${t('profile.user.mobile')}：`" prop="mobile">
        <el-input v-model="formModel.mobile" />
        <el-button
          v-if="formModel.mobile !== userStore.userProfile.mobile"
          type="primary"
          size="small"
          plain
          circle
          :icon="Check"
          :loading="formBtnloading.mobile"
          @click="submitFormItem('mobile')"
        />
        <el-button
          v-if="formModel.mobile !== userStore.userProfile.mobile"
          size="small"
          plain
          circle
          :icon="Close"
          @click="cancelFormItem('mobile')"
        />
      </el-form-item>
      <el-form-item :label="`${t('profile.user.email')}：`" prop="email">
        <el-input v-model="formModel.email" />
        <el-button
          v-if="formModel.email !== userStore.userProfile.email"
          type="primary"
          size="small"
          plain
          circle
          :icon="Check"
          :loading="formBtnloading.email"
          @click="submitFormItem('email')"
        />
        <el-button
          v-if="formModel.email !== userStore.userProfile.email"
          size="small"
          plain
          circle
          :icon="Close"
          @click="cancelFormItem('email')"
        />
      </el-form-item>
    </el-form>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import { ElMessage, FormRules } from 'element-plus'
import { useUserStore } from '@/store/modules/user'

type UserProfileUpdateReqVO = any

const Check = useIcon({ icon: 'ep:check' })
const Close = useIcon({ icon: 'ep:close' })

defineOptions({ name: 'BasicInfo' })

const { t } = useI18n()
const userStore = useUserStore()

const formRef = ref()
const formModel = reactive<UserProfileUpdateReqVO>({
  nickname: '',
  mobile: '',
  email: '',
  sex: ''
})
const formRules: FormRules = {
  nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
  mobile: [
    { required: true, message: t('profile.rules.phone'), trigger: 'blur' },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: t('profile.rules.truephone'),
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
    {
      type: 'email',
      message: t('profile.rules.truemail'),
      trigger: ['blur', 'change']
    }
  ]
}
const formBtnloading = reactive<{
  [key: string]: boolean
}>({
  nickname: false,
  mobile: false,
  email: false,
  sex: false
})
function cancelFormItem(key: string) {
  formModel[key] = userStore.userProfile[key]
  formRef.value.clearValidate(key)
}
function submitFormItem(key: string) {
  formBtnloading[key] = true
  try {
    formRef.value.validateField(key, async (vaild: boolean) => {
      if (vaild) {
        const params: UserProfileUpdateReqVO = {}
        params[key] = formModel[key]
        // Todo api
        ElMessage.success(t('common.updateSuccess'))
        userStore.getUserProfileData()
      }
    })
  } finally {
    formBtnloading[key] = false
  }
}

function init() {
  formModel.nickname = userStore.userProfile.nickname
  formModel.mobile = userStore.userProfile.mobile
  formModel.email = userStore.userProfile.email
  formModel.sex = userStore.userProfile.sex
}

watch(
  () => userStore.userProfile.isLoad,
  (newVal, oldVal) => {
    if (newVal && !oldVal) {
      init()
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.el-radio-group,
.el-input,
.el-textarea,
:deep(.el-date-editor.el-input) {
  width: 300px;
  margin-right: 10px;
}
</style>
